<template>
 <div>
     <el-button plain @click="submit">提交</el-button>
     <el-form ref="fillForm" class="fillTableForm" :model="formData" >
       <div class="table-wrapper" ref="tableWrapper">
         <el-table :data="formData.fillTableData" ref="fillTable" show-summary  :summary-method="getSummaries" height="700px">
           <el-table-column type="index" width="50" label="序号" align="center" fixed>
             <template scope="scope">
               <span>{{ scope.$index + 1 }}</span>
             </template>
           </el-table-column>
           <el-table-column label="类别" prop="type" header-align="center" align="center" width="200" show-overflow-tooltip fixed></el-table-column>
           <el-table-column label="年龄" header-align="center" align="center" prop="age">
               <template v-slot="scope">
                 <el-form-item :prop="`fillTableData.${scope.$index}.age`" >
                   <span v-if="(scope.$index+1) % 5 == 0">{{scope.row.age}}</span>
                   <el-input-number v-else :controls="false" @change="changNum(scope.$index,scope.row)" v-model.trim="scope.row.age" placeholder="请输入" :clearable="true"></el-input-number>

                 </el-form-item>
               </template>
           </el-table-column>
           <el-table-column label="姓名" header-align="center" align="center"  prop="name">
             <template v-slot="scope">
               <el-form-item :prop="`fillTableData.${scope.$index}.name`" >
                 <span v-if="(scope.$index+1) % 5 == 0">{{scope.row.name}}</span>
                 <el-input-number v-else :controls="false" @change="changNum(scope.$index,scope.row)" v-model.trim="scope.row.name" placeholder="请输入" :clearable="true"></el-input-number>
               </el-form-item>
             </template>
           </el-table-column>
           <el-table-column label="合计" prop="count" header-align="center" align="center">
           </el-table-column>
         </el-table>
       </div>
     </el-form>
 </div>
</template>

<script>
export default {
  name: "index",
  watch:{

  },
  created() {
    let tableArr = this.getEveryFiveElements(this.formData.fillTableData)
  },
  data(){
    return{
      formData:{
        fillTableData:[
          {type:'类别',age:1,name:11,count:12},
          {type:'类别1',age:2,name:12,count:14},
          {type:'类别2',age:3,name:13,count:16},
          {type:'类别3',age:4,name:14,count:18},
          {type:'合计',age:10,name:50,count:60},
          {type:'类别',age:6,name:16,count:22},
          {type:'类别1',age:7,name:17,count:24},
          {type:'类别2',age:8,name:18,count:26},
          {type:'类别3',age:9,name:19,count:28},
          {type:'合计',age:30,name:70,count:100},
          {type:'类别',age:6,name:16,count:22},
          {type:'类别1',age:7,name:17,count:24},
          {type:'类别2',age:8,name:18,count:26},
          {type:'类别3',age:9,name:19,count:28},
          {type:'合计',age:30,name:70,count:100}]},
      //currentRow:{}
    }
  },
  methods:{
   getEveryFiveElements(arr) {
     let newCardList = [];
     for (let i = 0; i < arr.length; i += 5) {
       newCardList.push(arr.slice(i, i + 5));
     }
     return newCardList ;
    },
   changNum(index,row){
       //算右侧合计
       row.count = row.age + row.name
      //算统计 每五行为一组
      let tableArr = this.getEveryFiveElements(this.formData.fillTableData)

     let rowsGroup = 5;//每组的数量 每5行为一组
     let rowIndex = index + 1//行号，从1开始计数
     let currGroup = rowIndex % rowsGroup == 0 ? parseInt(rowIndex / rowsGroup) : parseInt(rowIndex / rowsGroup) + 1;   //点击的行 位于第几组

     let excludeTotalRow = tableArr[currGroup-1].slice(0,4) ; //点击的表格所在的组，截取前4行（排除合计行）
     let sums =  [] ;
     let columns = ['index','type','age','name','count'] //整张的属性值
     let rowData = {} ;
     columns.forEach((column, index) => {
       if (column == 'type'){
         rowData[column] = '合计'
       }
       const values = excludeTotalRow.map((item) => Number(item[column]))
       if (!values.every((value) => isNaN(value))) {
         let sum = values.reduce((prev, curr) => {
           const value = Number(curr)
           if (!isNaN(value)) {
             return prev + curr
           } else {
             return prev
           }
         }, 0)
         sums[index] = sum
         rowData[column] = sum
       }
     })
     console.log("currGroup",currGroup)
     this.formData.fillTableData.map((item,index)=>{ //每次点击 重新计算合计列
        if (index + 1 ==  rowsGroup *  currGroup){ //点击的行号从0开始计数需要加1，如果等于5的整数倍的行号，计算
          for (let key in item) {
            if (item.hasOwnProperty(key)) {
               item[key] = rowData[key]
            }
          }
        }
     })
    },
    submit(){
     console.log("this.formData.fillTable:",this.formData.fillTableData)
    },
    getSummaries(param) {
      const { columns, data } = param;
      //console.log("param:",param)
      const sums = [];
      let arr = this.filterTotalRows() ;
      //console.log("arr:",arr)
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '-';
          return;
        }
        if (index === 1) {
          sums[index] = '总计';
          return;
        }

        const values = arr.map(item => {
          //console.log("column:",column)
          return Number(item[column.property])
        });
        console.log("values:",values)
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    filterTotalRows(){
      let totalRows =  [] ;
      this.formData.fillTableData.map((item,index)=>{
        if ((index + 1) % 5 == 0){
          totalRows.push(item) ;
        }
      })
      return totalRows ;
    }
  }
}

</script>

<style scoped>
.el-form-item{
  margin-bottom: 0;
}
</style>